<template>
  <div class="apartment-info-box">
    <div class="detail-name flex-row-start">{{apartment.apartmentName}}</div>
    <!--      左边公寓信息-->
    <div class="detail-body flex-col" >
      <!--        轮播图-->
      <Carousel :list="apartment.imageList"></Carousel>


      <h2 class="left-align">公寓信息</h2>
      <div class="left-align" style="width:95%">
        {{apartment.description}}
      </div>
      <div class="left-align flex-row-start" style="margin-bottom: 20px">
        <TextLink color="#01acac">更多详情</TextLink>
      </div>

      <!--        公寓其他信息 步行时间、地点...-->
      <div class="flex-col-center">

        <div class="info-item">
          <i class="el-icon-position icon"></i>
          <div class="info-label">地址:</div>
          <div>{{apartment.address}}</div>
        </div>

        <div v-for="(school,index) in apartment.schoolList" class="info-item" >
          <i class="el-icon-position icon" ></i>
          <div class="info-label">前往{{school.schoolName}}:</div>
          <div class="flex-row-center" v-if="school.onfoot">
            <i class="icon-buhang iconfont icon"></i>
            <div>{{school.onfoot}}分钟</div>
          </div>
          <div  class="flex-row-center" v-if="school.bybus">

            <i class="icon-gongjiao iconfont icon"></i>
            <div>{{school.bybus}}分钟</div>
          </div>
          <div  class="flex-row-center" v-if="school.bytexi">
            <i class="icon-chuzuche iconfont icon"></i>
            <div>{{school.bytexi}}分钟</div>
          </div>
        </div>

        <div class="info-item">
          <i class="el-icon-position icon"></i>
          <div class="info-label">设施:</div>
          <div v-html="computeStuffList">

          </div>

        </div>

        <div class="info-item">
          <i class="el-icon-position icon"></i>
          <div class="info-label">房租包含:</div>
          <div v-html="computeFeetypeList">

          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import TextLink from "@/components/TextLink.vue";
import Carousel from "@/components/carousel/Carousel.vue";
export default {
  name: "ApartmentInfoBox",
  components: {Carousel,TextLink},
  props:{
    apartment:{
      type:Object
    }
  },
  data() {
    return {
        // 测试数据
      // apartment:{
      //   id:0,
      //   apartmentName:"天美公寓",
      //   description:"选择伦敦的全新公寓Vega，步行数分钟到达Vauxhall地铁站，各大主要大学触手可及，留学生活便利舒适",
      //   address:"Miles St, Oval, London, 伦敦, SW8 1RZ",
      //   schoolList:[
      //     {
      //       schoolName:"伦敦艺术大学切尔西艺术与设计学院",
      //       onFoot:22,
      //       byBus:10,
      //       byTexi:5
      //     },
      //     {
      //       schoolName:"前往伦敦国王学院（St Thomas'校区)",
      //       onFoot:24,
      //       byBus:12,
      //       byTexi:6
      //     },
      //   ],
      //   stuffList:["提供家具","健身房"],
      //   feetypeList:["无线网", "水费", "电费", "暖气","煤气费"]
      // },
      //
      // imageList:[
      //   "https://image.student.com/max_1250x700/4ee2473e0c0c4330143cdd8564780801-d85b08b9e3ce20ce65af54376ba780cf.jpg",
      //   "https://image.student.com/max_1250x700/cf561c7ec67dcf5456881c4b2f23e554-bf356f4008392ba6534a3925d06d2365.jpg",
      //   "https://image.student.com/max_1250x700/e7219375050ad19974bfac8cc0ed6aaa-ee3b10c257dd4fac9d281f558fcb2b85.jpg"
      // ]
    }
  },
  methods: {

    // 得到裁剪数组的长度
    sliceListLen(list,maxLen){
      let len=list.length
      return len>= maxLen?maxLen:len
    },
    // 得到裁剪数组的剩余长度
    leaveListLen(list,hasLen){
      let len=list.length
      let leaveLen=(len-hasLen)
      return leaveLen>0?leaveLen:0
    },
    // 得到裁剪数组的字符拼接
    getSliceListStr(list,maxLen){

      // 获取渲染长度
      let len = this.sliceListLen(list,maxLen)
      let str=""

      // 获取渲染字符串
      list.slice(0,len).forEach((s,index) =>{
        str+=s
        if(index!==(len-1)){
          str+=","
        }
      })

      // 获取多余长度
      let levelLen = this.leaveListLen(list,maxLen)
      if(levelLen>0){
        str+=`<span style="color:#38B2A6" >+${levelLen}</span>`
      }
      return str
    },


  },
  computed:{
    computeStuffList(){
      return this.getSliceListStr(this.apartment.stuffList,3)
    },
    computeFeetypeList(){
      return this.getSliceListStr(this.apartment.feetypeList,4)
    },

  },
  mounted() {

  }
}
</script>

<style scoped lang="less">
.apartment-info-box {
  width: 50%;
  .detail-name{
    width: 73%;

    font-size: 25px;
    font-weight: 550;
    color: #4d4d4d;
    margin-bottom: 20px;
  }
  .left-align {
    width: 100%;
    text-align: left;
  }

  .icon {
    font-size: 16px;
    margin: 0 3px 0 5px;
  }

  .info-item {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
    font-size: 14px;

    .info-label {
      margin-right: 10px;
    }
  }
}
</style>